<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript">
    </script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript">
    </script>
</head>

<body>

    <div id="app">
        <cp1></cp1>

    </div>



    <script>
        Vue.component('cp1', {
            template: `<div>
                         我是cp1  {{ ct }}
                         <button @click="ct++"> ct++</button>
                         <button @click="fn22"> 开始</button>
                         <button @click="mystop"> 停止</button>
                         <div v-if=" htVal!='' "> 本次最停止的时间为 {{htVal}} </div>
                            <div v-if=" timeArr!='' "> 每停止一次就记录一次 {{timeArr}}
                                <div v-for="(item , index) in timeArr" :key="'time'+index">
                                    <div>第{{index+1}}次，{{item}}</div>
                                </div>
                            </div>
                            <div v-if=" timeArr.length >= 3 ">大于3 , 已自动删除</div>
                      </div>`,
            mounted() {

                // 对于侦听器 我们有了另外的一种写法
                // this.$watch(要监听的状态名, 处理函数 ， 其他配置(深度监听,立即执行))
                this.$watch('ct', (nv, ov) => {
                    console.log('ct 变化后的值', nv)

                    console.log('ct 变化前的值', ov)
                }, {
                    deep: true,
                    immediate: true
                })
            },
            data() {
                return {
                    ct: 1,
                    myTime: '',
                    htVal: '',
                    ggVal: '',
                    timeArr: []
                }
            },
            methods: {
                fn22() {
                    clearInterval(this.myTime)
                    this.myTime = setInterval(() => {
                        this.ct++
                        // this.$set( this.list, 4, 888 )
                        // console.log(typeof this.ct)
                    }, 20)
                },
                mystop() {
                    // clearTimeout(哪一个timeout) 
                    // this.htVal = this.ct
                    clearInterval(this.myTime)
                    console.log("清除了")
                    if (this.timeArr.length >= 3) {
                        this.timeArr = ''
                    } else{
                        // if(){ }
                        if (this.timeArr!= undefined) {
                            this.timeArr.push(this.ct)
                        }
                       
                        this.ggVal = this.ct
                        console.log('获取了ct更新之后ggVal的值', this.ggVal)
                        console.log('获取了ct更新之后timeArr的值', this.timeArr)
                    }
                    // clearInterval(this.myTime)

                }
            }
        })

        const app = new Vue({
            // el: '#app'
        })

        // vue实例的 $mount(css的选择器)  等于配置了 el的值
        app.$mount('#app')
    </script>

</body>

</html>